<script setup lang="ts">
interface Props {
  income: string
  expenses: string
}

defineProps<Props>()
</script>

<template>
  <div class="details-container">
    <div>
      <h4>收入</h4>
      <p class="money plus">
        &yen;<span id="money-plus">{{ income }}</span>
      </p>
    </div>
    <div>
      <h4>支出</h4>
      <p class="money minus">
        &yen;<span id="money-minus">{{ expenses }}</span>
      </p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '../scss/_variables.scss';

.details-container {
  padding: 20px;
  background-color: $board-bgColor;
  box-shadow: $box-shadow;
  display: flex;
  justify-content: space-between;

  div {
    flex: 1;
    text-align: center;
    &:first-of-type {
      border-right: 1px solid black;
    }

    .money {
      margin: 5px 0;
      font-size: 20px;
      letter-spacing: 1px;

      &.plus {
        color: $plus-color;
      }

      &.minus {
        color: $minus-color;
      }
    }
  }
}
</style>
